<template>
  <template v-if="condition">
    <template v-for="(cond, condIndex) in condition" :key="condIndex">
      <!-- cond中有predicate对象 -->
      <template v-if="cond.predicate">
        <!-- cond中的type不为COMPLEX -->
        <template v-if="cond.predicate.type != 'COMPLEX'">
          <!-- 如果是第一个显示 -->
          <template v-if="isFirst">
            <!-- 第一个'和'不显示 -->
            <span class="span-between" v-show="condIndex != 0">和</span>
          </template>
          <!-- 如果不是第一个显示 -->
          <template v-else>
            <span class="span-between">和</span>
          </template>
          <span class="key-word">{{ cond.key.key }}</span>
          <span>{{ keyWordsTranslation[cond.predicate.operation] }}</span>
          <!-- 展示时如果有源属性就展示源属性 -->
          <template v-if="cond.predicate.value.dynamicValue?.sourceAttribute">
            <span class="dynamic">{{
              keyWordsTranslation[cond.predicate.value.dynamicValue?.sourceType]
            }}</span
            ><span>·</span>
            <span class="dynamic">{{ cond.predicate.value.dynamicValue.sourceAttribute }}</span>
          </template>
          <!-- 展示时没有源属性就展示默认值 -->
          <template v-else>
            <span class="key-value" v-if="cond.valueType === 'STRING'"
              >'{{ cond.predicate.value?.defaultValue }}'</span
            >
            <span class="key-value" v-if="cond.valueType === 'NUMERIC'">{{
              cond.predicate.value?.defaultValue
            }}</span>
            <span class="key-value" v-if="cond.valueType === 'BOOLEAN'">{{
              keyWordsTranslation[cond.predicate.value?.defaultValue]
            }}</span>
            <span class="key-value" v-if="cond.valueType === 'DATE_TIME'">{{
              formatTime(cond.predicate.value?.defaultValue)
            }}</span>
          </template>
        </template>
        <!-- cond中的type是COMPLEX -->
        <template v-else>
          <ShowCondition
            :formData="cond.predicate.predicates"
            :keyObj="cond.key"
            :valueType="cond.valueType"
            :isFirst="condIndex === 0 ? true : false"
            :isOr="cond.predicate.operation === 'OR' ? true : false"
            :hasOr="hasOr"
            :hasNext="condIndex === condition.length - 1 ? false : true"
            :hasBefore="condIndex === 0 ? false : true"
          />
        </template>
      </template>
      <!-- cond中没有有predicate对象 -->
      <template v-else>
        <!-- cond中的type不为COMPLEX -->
        <template v-if="cond.type != 'COMPLEX'">
          <template v-if="isFirst">
            <span class="span-between" v-show="(condIndex != 0 || hasBefore) && !isOr">和</span>
            <span class="span-between" v-show="(condIndex != 0 || hasBefore) && isOr">或</span>
            <span v-show="condIndex === 0 && isOr">(</span>
          </template>
          <template v-else>
            <template v-if="isOr">
              <span class="span-between" v-show="condIndex === 0">和</span>
              <span class="span-between" v-show="condIndex != 0">或</span>
            </template>
            <template v-else>
              <template v-if="condIndex === 0">
                <span class="span-between" v-show="hasOr">或</span>
                <span class="span-between" v-show="!hasOr">和</span>
              </template>
              <template v-else>
                <span class="span-between">和</span>
              </template>
            </template>
            <span v-show="condIndex === 0 && isOr && !hasOr">(</span>
          </template>
          <span class="key-word">{{ keyObj.key }}</span>
          <span>{{ keyWordsTranslation[cond.operation] }}</span>
          <!-- 展示时如果有源属性就展示源属性 -->
          <template v-if="cond.value.dynamicValue?.sourceAttribute">
            <span class="dynamic">{{
              keyWordsTranslation[cond.value.dynamicValue?.sourceType]
            }}</span
            ><span>·</span>
            <span class="dynamic">{{ cond.value.dynamicValue?.sourceAttribute }}</span>
          </template>
          <!-- 展示时如果有源属性就展示默认值 -->
          <template v-else>
            <span class="key-value" v-if="valueType === 'STRING'"
              >'{{ cond.value?.defaultValue }}'</span
            >
            <span class="key-value" v-if="valueType === 'NUMERIC'">{{
              cond.value?.defaultValue
            }}</span>
            <span class="key-value" v-if="valueType === 'BOOLEAN'">{{
              keyWordsTranslation[cond.value?.defaultValue]
            }}</span>
            <span class="key-value" v-if="valueType === 'DATE_TIME'">{{
              formatTime(cond.value?.defaultValue)
            }}</span>
          </template>
          <span v-show="condIndex === condition.length - 1 && (isOr || hasOr) && !hasNext">)</span>
        </template>
        <!-- cond中的type为COMPLEX -->
        <template v-else>
          <ShowCondition
            :formData="cond.predicates"
            :keyObj="keyObj"
            :valueType="valueType"
            :isFirst="condIndex === 0 ? true : false"
            :isOr="cond.operation === 'OR' ? true : false"
            :hasOr="hasOr || isThisOr"
            :hasNext="condIndex === condition.length - 1 ? false : true"
            :hasBefore="!isThisFirst"
          />
        </template>
      </template>
    </template>
  </template>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { keyWordsTranslation } from '../form.data';
  import dayjs from 'dayjs';
  import ShowCondition from '/@/components/thingsborad/sharedComponents/modules/addDeviceFileModel/Alarm/ShowCondition.vue';
  const props = defineProps({
    formData: { type: Object },
    keyObj: { type: Object }, //最外层key的内容
    valueType: { type: Object }, //外层的valueType
    isFirst: { type: Boolean }, //是否是第一个，用来判断和的显示
    isOr: { type: Boolean }, //是否是逻辑或
    hasOr: { type: Boolean }, //是否曾经有过逻辑或
    hasNext: { type: Boolean }, //是否是最后一个
    hasBefore: { type: Boolean }, //是否有上一个
  });
  let condition = ref<any>({});
  let keyObj = ref<any>({});
  let valueType = ref<any>({});
  let isFirst = ref<boolean>();
  let isOr = ref<boolean>();
  let hasOr = ref<boolean>(false);
  let hasNext = ref<boolean>();
  let isThisOr = ref<boolean>(false); //当前是否是逻辑or
  let hasBefore = ref<boolean>(false);
  let isThisFirst = ref<boolean>(false); //当前是否是第一个
  watch(
    () => props.formData,
    (nVal) => {
      condition.value = nVal;
    },
    { immediate: true },
  );
  watch(
    () => props.keyObj,
    (nVal) => {
      keyObj.value = nVal;
    },
    { immediate: true },
  );
  watch(
    () => props.valueType,
    (nVal) => {
      valueType.value = nVal;
    },
    { immediate: true },
  );
  watch(
    () => props.isFirst,
    (nVal) => {
      isFirst.value = nVal;
    },
    { immediate: true },
  );
  watch(
    () => props.isOr,
    (nVal) => {
      isOr.value = nVal;
      if (nVal === true) {
        isThisOr.value = true;
      }
    },
    { immediate: true },
  );
  watch(
    () => props.hasOr,
    (nVal) => {
      if (nVal) {
        hasOr.value = nVal;
      }
    },
    { immediate: true },
  );
  watch(
    () => props.hasNext,
    (nVal) => {
      if (nVal) {
        hasNext.value = nVal;
      }
    },
    { immediate: true },
  );
  watch(
    () => props.hasBefore,
    (nVal) => {
      if (nVal) {
        hasBefore.value = nVal;
        if (nVal) {
          isThisFirst.value = false;
        } else {
          isThisFirst.value = true;
        }
      }
    },
    { immediate: true },
  );
  //将时间戳转化为时间
  function formatTime(dateString: number) {
    if (dateString) {
      const date = dayjs.unix(dateString / 1000);
      return date.format('YYYY-MM-DD HH:mm:ss');
    } else {
      return '';
    }
  }
</script>

<style lang="less" scoped>
  .key-word {
    border: 1px solid #00000040;
    color: #305680;
    border-radius: 4px;
    padding: 0 4px;
    margin: 4px 4px;
    font-weight: 700;
  }
  .key-value {
    border: 1px solid #00000040;
    color: #ff5722;
    border-radius: 4px;
    padding: 0 4px;
    margin: 4px 4px;
    font-weight: 700;
  }
  .dynamic {
    border: 1px solid #00000040;
    color: #0c959c;
    border-radius: 4px;
    padding: 0 4px;
    margin: 4px 4px;
    font-weight: 700;
  }
  .span-between {
    margin: 0 4px;
  }
</style>
